import { Map, APILoader } from '@uiw/react-amap';
import { message } from 'antd';
import React from 'react';
import { io } from 'socket.io-client';

export class MyMap extends React.Component {
  constructor(props) {
    super(props);
    // 属性设置
    // 地图中心
    this.center = [114.35738432483673, 30.608313392810004];
    // zoom
    this.zoom = 18;
    this.ws_url = 'http://127.0.0.1:81';
    this.socket = undefined;
  }

  // 画点
  marker_component = (AMap, map, position, visiable) => {
    // 调用高德地图原生API
    const marker = new AMap.Marker({
      position: new AMap.LngLat(position.lon, position.lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      visible: visiable,
    });
    // 将创建的点标记添加到已有的地图实例：
    map.add(marker);
  };

  // http划线
  http_line_path_draw = (AMap, map, http_line_path, http_path_visiable) => {
    if (http_path_visiable) {
      // 经纬度数据处理：字符串转数字
      http_line_path = http_line_path.map((gps) => gps.map(Number));
      console.log(http_line_path);
      message.info('3秒之后显示轨迹回放');
      setTimeout(function () {
        AMap.plugin('AMap.MoveAnimation', function () {
          const linePath = http_line_path;
          const passedPolyline = new AMap.Polyline({
            map: map,
            path: [],
            strokeColor: 'red',
            strokeWeight: 6,
          });
          const path_marker = new AMap.Marker({
            map: map,
            position: linePath[0],
            autoRotation: true,
          });
          map.add(path_marker);
          path_marker.on('moving', function (e) {
            passedPolyline.setPath(e.passedPath);
          });
          path_marker.moveAlong(linePath, {
            duration: 1000, // 每一段的时长
            autoRotation: true,
          });
        });
      }, 3000);
    }
  };

  // websocket划线
  websocket_path_monitor = (AMap, map, websocket_path_monitor_switch) => {
    if (websocket_path_monitor_switch) {
      message.info('3秒之后开启轨迹监控');
      setTimeout(() => {
        // 记录上一个点
        let last_gps = undefined;
        // 开启websocket连接
        this.socket = io(this.ws_url);
        // 事件监听
        this.socket.on(this.props.trailer_id + 'front', (data) => {
          console.log(data);
          // 第一个点，打点
          if (last_gps == undefined) {
            last_gps = data.GPS;
            const marker_start = new AMap.Marker({
              position: new AMap.LngLat(data.GPS[0], data.GPS[1]),
              visiable: true,
            });
            map.add(marker_start);
          }
          // 后面的点，画线
          else {
            AMap.plugin('AMap.MoveAnimation', function () {
              const websocket_path = [last_gps, data.GPS];
              const websocket_passedPolyline = new AMap.Polyline({
                map: map,
                path: [],
                strokeColor: 'red',
                strokeWeight: 6,
              });
              const websocket_path_marker = new AMap.Marker({
                map: map,
                position: websocket_path[0],
                autoRotation: true,
              });
              map.add(websocket_path_marker);
              websocket_path_marker.on('moving', function (e) {
                websocket_passedPolyline.setPath(e.passedPath);
              });
              websocket_path_marker.moveAlong(websocket_path, {
                duration: 1000,
                autoRotation: true,
              });
              map.remove(websocket_path_marker);
            });
            last_gps = data.GPS;
          }
        });
      }, 3000);
    } else {
      if (this.socket) this.socket.disconnect();
      this.socket = undefined;
    }
  };

  render() {
    // 接收props
    // 1 标记点位置 marker_position
    const { marker_position } = this.props;
    // 2 标记点是否可见 marker_visiable
    const { marker_visiable } = this.props;
    // 3 http轨迹回放轨迹点接收 http_line_path
    const { http_line_path } = this.props;
    // 4 http轨迹回放轨迹是否可见
    const { http_path_visiable } = this.props;
    // 5 websocket轨迹监控开启
    const { websocket_path_monitor_switch } = this.props;
    const Demo = () => (
      <div style={{ width: '1000px', height: '600px' }}>
        <Map center={[114.35738432483673, 30.608313392810004]} zoom={18}>
          {({ AMap, map, container }) => {
            this.marker_component(AMap, map, marker_position, marker_visiable);
            // const linePath = this.state.http_line_path
            this.http_line_path_draw(AMap, map, http_line_path, http_path_visiable);
            this.websocket_path_monitor(AMap, map, websocket_path_monitor_switch);
            return;
          }}
        </Map>
      </div>
    );

    return (
      <APILoader akay="c36700228ab854ce91c7226f41427904">
        <Demo></Demo>
      </APILoader>
    );
  }
}
